<script setup lang='ts'>
import { reactive } from 'vue'
import { Base64 } from 'js-base64'
import { oIdcLogin, getUserPermission } from '@/api/user'
import { getBarWheelMachine, GetDeviceType } from '@/api/publicApi'
import { useUserStore } from '@/store'

// 定义变量
const msgMap = {
  'Invalid username or password!': '用户名或密码错误!'
}
const formInline = reactive({
  username: 'admin',
  password: '123qwe'
})
document.cookie = '.AspNetCore.Culture=c%3Dzh-Hans%7Cuic%3Dzh-Hans;'

// 用户信息
const userInfo = reactive({
  id: '',
  userNmae: '',
  accessToken: '',
  companyCode: '',
  harborCode: ''
})

// store
const store = useUserStore()

// 定义函数
// 登录
const login = async() => {
  console.log('点击登录---->')
  localStorage.clear()
  // OIDC登录
  let { result } = await oIdcLogin({
    username: formInline.username,
    password: Base64.encode(formInline.password), // Base64.encode(this.loginForm.password)
    ClientId: 'apiClientPassword',
    ClientSecret: 'apiSecret'
  })
  console.log('点击登录结果---->',result)
  // 本地登录
  // let { result } = await userLogin({
  //   userNameOrEmailAddress: formInline.username,
  //   password: Base64.encode(formInline.password), // Base64.encode(this.loginForm.password)
  //   rememberClient: true
  // })
  let { code, data, msg } = result
  
  if (code === 200) {
    let { id, username, accessToken, companyCode, harborCode } = data
    userInfo.id = data.id
    userInfo.userNmae = data.userNmae
    userInfo.accessToken = data.accessToken
    userInfo.companyCode = data.companyCode
    userInfo.harborCode = data.harborCode
    localStorage.setItem('token', data.accessToken)
    
    // 用户信息存入pinia
    console.log('运行到此处---->用户信息存入pinia')
    store.setUserInfo({
      id,
      username,
      accessToken,
      companyCode,
      harborCode
    })
    
    // 获取堆取料机
    let res = await getBarWheelMachine({
      companyCode: userInfo.companyCode,
      harborCode: userInfo.harborCode,
      MaxResultCount: 99 // 因分页问题  需要设定最大请求条数
    })
    
    if (res.success === true) {
      localStorage.BarWheelMachineList = JSON.stringify(
        res.result.items
      )
      // console.log(res.result.items);
      localStorage.setItem(
        'BarWheelMachineCode',
        res.result.items[0].code
      )
    }
    console.log('运行到此处22222---->', localStorage.BarWheelMachineCode)
    // this.$closeLoading()
    let res2 = await GetDeviceType({
      companyCode: userInfo.companyCode,
      harborCode: userInfo.harborCode
    })
    localStorage.DeviceTypeList = JSON.stringify(res2.result.items)
    console.log('获取设备类型---------->', res2)
  } else {
    // this.$message.error(msg)
  }
}

</script>
<template>
  <div class="login-main-box">
    <div class="Login">
      <div class="logo-box" />
      <div class="login-box">
        <p>登录</p>
        <h2>欢迎登录堆取料机智能感知与健康诊断监测平台</h2>
        <el-form
          label-position="right"
          label-width="50px"
          :model="formInline"
        >
          <div>账号</div>
          <div>
            <el-input v-model="formInline.username" />
          </div>

          <div>密码</div>
          <div>
            <el-input
              v-model="formInline.password"
              type="password"
            />
          </div>
          <div>
            <!-- <el-checkbox v-model="checked">记住密码</el-checkbox> -->
          </div>
          <div class="login-Btn">
            <el-button
              type="primary"
              @click="login"
            >
              登录
            </el-button>
            <!-- <el-button @click="bb" size="small" class="m-l-ten">连接</el-button>
                <el-button @click="aa" size="small" class="m-l-ten">接口</el-button> -->
          </div>
        </el-form>
      </div>
      <div class="about">
        <!-- href="http://www.zkhyck.com/"  -->
        <el-link
          style="color: #b6bfc9; font-size: 10px;"
          type="primary"
          target="_blank"
        >
          山港装备集团日照港口装备制造有限公司
        </el-link>
        <p>版本号：2.0.0.1</p>
      </div>
    </div>
  </div>
</template>

<style scoped lang=scss>
.login-main-box {
  width: 100%;
  height: 100%;

  .logo-box {
    width: 300px;
    height: 60px;
    margin-top: 30px;
    margin-left: 30px;
    background-image: url("../../assets/imgs/logo.png");
    background-size: 100% 100%;

    /* border: 1px solid red; */
  }

  .Login {
    position: relative;
    width: 100%;
    height: 100%;

    // animation: hueRotate 10s infinite alternate;
    padding-top: 1px;
    background-image: url("../../assets/imgs/loginBackImg.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 100%;

    .login-box {
      position: absolute;
      top: 135px;
      right: 170px;
      width: 390px;
      height: 450px;
      padding: 45px;
      background-color: #fff;

      // margin: 200px auto;
      border-radius: 10px;

      /* box-shadow: rgb(50 50 93 / 25%) 0 50px 100px -20px,
        rgb(0 0 0 / 30%) 0 30px 60px -30px,
        rgb(10 37 64 / 35%) 0 -2px 6px 0 inset; */

      >h2 {
        margin: 10px 0 40px;
        color: #b6bfc9;
        font-weight: 400;
        font-size: 14px;
        font-family: PingFangSC-Regular, sans-serif;
        line-height: 20px;
        text-align: center;
      }

      >p {
        width: 52px;
        height: 30px;
        color: #198bff;
        font-weight: 600;
        font-size: 22px;
        font-family: PingFangSC-Semibold, sans-serif;
        line-height: 30px;
      }

      >.el-form {
        >div {
          margin-top: 10px;
        }
      }
    }
  }

  .about {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    height: 60px;
    color: #b6bfc9;
    text-align: center;

    .el-link,
    p {
      color: #b6bfc9;
      font-size: 10px;
    }
  }

  .form-wrapper {
    width: 500px;
    margin: 0 auto;
    margin-top: 200px;
    text-align: center;
    border: 1px solid red;

    button {
      width: 100px;
    }
  }
}

</style>
